<template>
  <view class="page">
    <!-- {{canIUse}} -->
    <!-- <mkt 
      v-if="canIUse"
      mode="AUTOMATIC"
      boothCode="MERCHANT_SELF_TINYAPP" 
      title="领取优惠券"
      onError="onError" 
      onRender="onRender"
      onApplySuccess="onApplySuccess"
      cityCode="310010"
    /> -->
    <!-- #ifdef MP-ALIPAY -->

    <view class="list" v-if="list.length">
      <template v-for="record of list">
        <get-coupon
          onGetCouponSuccess="onGetCouponSuccess"
          onGetCouponFail="onGetCouponFail"
          onUseImmediately="onUseImmediately"
          onClose="onClose"
          v-if="record.consult_result_code === 'SUCCESS'"
          :key="record.alipay_activity_id"
          :params="params(record)"
          :dialogBtnType="dialogBtnType"
          :dialogBtnStyle="dialogBtnStyle"
          :zIndex="9998"
        >
          <view class="item">
            <view class="itemHd">
              <!-- <view class="status">未使用</view> -->

              <view class="itemHdLeft">
                <view class="name">{{ record.name }}</view>
                <view class="time" v-if="record.expire_type === 1">
                  领取后{{
                    record.voucher_use_rule_info.voucher_use_time_info
                      .relative_period_info.wait_days_after_receive
                  }}天生效
                  <view>
                    生效后{{
                      record.voucher_use_rule_info.voucher_use_time_info
                        .relative_period_info.valid_days_after_receive
                    }}天内有效
                  </view>
                </view>
                <view class="time" v-else>
                  {{ getTime(record) }}
                </view>
                <view class="time">
                  {{ getLimit(record) }}
                </view>
              </view>

              <view class="itemHdRight">
                <view class="hd" v-if="record.discount_type === 2"
                  ><view>￥</view>{{ getPreferentialAmount(record) }}</view
                >
                <view class="hd" v-else
                  >{{ getDiscount(record) }}<view>折</view></view
                >
                <view class="bd">消费{{ record.min_price }}元可用</view>
              </view>
            </view>
            <view class="itemBd">
              <view class="msg">
                <template
                  v-if="
                    record.voucher_available_goods_info &&
                    record.voucher_available_goods_info.goods_name
                  "
                >
                  {{ record.voucher_available_goods_info.goods_name }}
                </template>
                <template v-else> 全场通用 </template>
              </view>
              <view class="btn">立即领取</view>
            </view>
          </view>
        </get-coupon>
      </template>
    </view>
    <toolsMore :status="moreStatus" @more="voucherLndex()"></toolsMore>
    <!-- #endif -->
  </view>
</template>

<script>
import { voucherLndex } from "@/api/alipay/coupon";
import toolsMore from "@/components/tools/tools-more.vue";

export default {
  components: {
    toolsMore,
  },
  data() {
    return {
      page: 1,
      count: 0,
      moreStatus: 1,
      page: 1,
      isEnd: false,
      list: [],

      dialogBtnType: 2,
      dialogBtnStyle: {
        color: "#000",
        borderColor: "yellowgreen",
        backgroundColor: "yellowgreen",
      },
    };
  },

  computed: {
    getLimit() {
      return (item) => {
        let { voucher_send_rule_info } = item.voucher_send_mode_info,
          { quantity_limit_per_user, quantity_limit_per_user_period_type } =
            voucher_send_rule_info,
          str = "";

        switch (quantity_limit_per_user_period_type) {
          case "LIFE_CYCLE":
            str = "整个活动周期";
            break;

          case "DAY":
            str = "每天";
            break;

          case "MONTH":
            str = "每月";
            break;

          case "WEEK":
            str = "每周";
            break;
        }

        str += `领取${quantity_limit_per_user}张`;

        return !quantity_limit_per_user_period_type ? "无限制领取" : str;
      };
    },

    getTime() {
      return (data) => {
        let { valid_begin_time, valid_end_time } =
          data.voucher_use_rule_info.voucher_use_time_info.absolute_period_info;
        return `${valid_begin_time}-${valid_end_time}`;
      };
    },

    getStatus() {
      return (status) => {
        let text;
        switch (status) {
          case "COUNT_OVER_LIMIT":
            text = "不可领取，次数超过限制";
            break;

          case "BUDGET_NOT_ENOUGH":
            text = "不可领取，预算不足";
            break;

          case "ACTIVITY_NOT_START":
            text = "活动未开始";
            break;

          case "ACTIVITY_NOT_PERMISSION":
            text = "商户没有权限发放该活动";
            break;

          case "OTHER":
            text = "不可领取，未知原因";
            break;
        }
        return text;
      };
    },

    getPreferentialAmount() {
      return (item) => {
        return item.sub_price || "0.00";
      };
    },

    getDiscount() {
      return (item) => {
        return item.discount || "10.0";
      };
    },

    params() {
      return ({ alipay_activity_id: activityId }) => {
        return [
          {
            activityId,
            outBizNo: activityId + new Date().getTime(),
          },
        ];
      };
    },
  },

  onLoad() {
    this.clearData();
    // #ifdef MP-ALIPAY
    this.$scope.onGetCouponSuccess = this.onGetCouponSuccess.bind(this);
    this.$scope.onGetCouponFail = this.onGetCouponFail.bind(this);
    this.$scope.onUseImmediately = this.onUseImmediately.bind(this);
    this.$scope.onClose = this.onClose.bind(this);
    // #endif
  },

  onReachBottom() {
    if (this.isEnd) {
      return;
    }

    this.voucherLndex();
  },

  onPullDownRefresh() {
    this.clearData();
  },

  methods: {
    clearData() {
      this.page = 1;
      this.isEnd = false;
      this.list = [];
      this.count = 0;

      this.voucherLndex();
    },

    voucherLndex() {
      let { list: oldList, page } = this;
      uni.showLoading({
        title: '加载中'
      });
      this.moreStatus = 2;
      voucherLndex({
        page,
      })
        .then((res) => {
          uni.hideLoading()
          uni.stopPullDownRefresh();
          this.moreStatus = 1;
          if (!res.code) {
            let { data: list, count } = res;

            if (list.length) {
              oldList.push(...list);
              this.page = this.page + 1;
            }

            if (oldList.length >= parseInt(count)) {
              this.isEnd = true;
              this.moreStatus = 3;
            }
          }
        })
        .catch(() => {
          uni.hideLoading()
          this.moreStatus = 1;
          uni.stopPullDownRefresh();
        });
    },

    // #ifdef MP-ALIPAY
    onGetCouponSuccess() {
    
    },

    onGetCouponFail({ errorMsg }) {
      this.$utils.toast(errorMsg);
    },

    // 立即使用
    onUseImmediately() {
      my.navigateTo({
        url: '/pages/home/home',
      })
    },

    onClose() {
      this.clearData();
    },
    // #endif
  },
};
</script>

<style scoped lang="scss">
.page {
  min-height: 100vh;
  background-color: #f2f2f2;
  padding: 0 24rpx;
}

.list {
  margin-top: 20rpx;
}

.item {
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  background: #fff;
  overflow: hidden;
}

.itemHd {
  position: relative;
  display: flex;
  align-items: center;
  padding: 30rpx;
}

.itemHdLeft {
  flex: 1;
  overflow: hidden;

  .name {
    font-size: 30rpx;
    font-weight: bold;
    color: #303113;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .time {
    margin-top: 12rpx;
    font-size: 22rpx;
    color: #8c8c8c;
  }
}

.itemHdRight {
  text-align: center;

  .hd {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: #f0250e;
    font-weight: bold;
    font-size: 56rpx;
    line-height: 1;

    view {
      font-size: 28rpx;
    }
  }

  .bd {
    padding-top: 10rpx;
    font-size: 22rpx;
    color: #8c8c8c;
  }
}

.itemBd {
  position: relative;
  padding: 14rpx 30rpx;
  border-top: 1px dashed #ededed;
  display: flex;
  justify-content: space-between;
  align-items: center;

  &:after,
  &:before {
    content: "";
    position: absolute;
    top: -10rpx;
    width: 20rpx;
    height: 20rpx;
    background: #f2f2f2;
    border-radius: 50%;
  }

  &:after {
    left: -10rpx;
  }

  &:before {
    right: -10rpx;
  }

  .btn {
    position: relative;
    width: 144rpx;
    height: 48rpx;
    line-height: 48rpx;
    font-size: 24rpx;
    font-weight: 400;
    text-align: center;
    border-radius: 24rpx;
    margin-left: 10rpx;
    background: #f0250e;
    color: #fff;

    &.disabled {
      background: #ededed;
    }
  }
}

.status {
  position: absolute;
  right: 0;
  top: 0;
  padding: 0 10rpx;
  border-radius: 0px 20rpx 0px 12rpx;
  line-height: 24rpx;
  font-size: 20rpx;
  font-weight: 400;
  color: #f0250e;
  background: #fee8e6;
}

.msg {
  margin-right: 10rpx;
  flex: 1;
  font-size: 20rpx;
  color: #8c8c8c;
  overflow: hidden;
}
</style>
